<template>
    <el-container class="h-screen w-screen">
        <el-header class="h-fit border-solid border-b-1 border-gray-200">
            <div class="font-bold text-base mt-5">ApiTest</div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="dlt" @select="handleSelectMenu" class="h-full">
                    <el-sub-menu index="dlt">
                        <template #title>
                            <span>大乐透接口</span>
                        </template>
                        <el-menu-item-group title="首页">
                            <el-menu-item index="dlt-index-refresh">同步官方数据</el-menu-item>
                            <el-menu-item index="dlt-index-index">获取服务端数据</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="工具">
                            <el-menu-item index="dlt-task">执行定时任务</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="订单">
                            <el-menu-item index="dlt-order-index">获取所有订单</el-menu-item>
                            <el-menu-item index="dlt-order-read">获取单个订单</el-menu-item>
                            <el-menu-item index="dlt-order-save">保存订单</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="网址">
                        <el-input v-model="form.url" style="max-width: 600px" placeholder="网址"
                            class="input-with-select">
                            <template #prepend>
                                <el-select v-model="form.method" placeholder="提交方式" style="width: 115px">
                                    <el-option label="GET" value="GET" />
                                    <el-option label="POST" value="POST" />
                                    <el-option label="DELETE" value="DELETE" />
                                    <el-option label="PATCH" value="PATCH" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="结果">
                        <div v-if="result.type == 'json'" style="width:100%; max-height:600px; overflow-y:auto">
                            <vue-json-pretty :data="result.data" />
                        </div>
                        <div v-else class="w-full">
                            <el-input v-model="result.data" type="textarea" :rows="20" class="w-full" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">发送</el-button>
                        <el-button @click="formRef.resetFields()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import { ElMessageBox } from 'element-plus';
const formRef = ref(null);
const form = ref({
    method: '',
    url: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
const result = ref({ type: 'string', data: null });

const onSubmit = () => {
    console.log('submit!')
    axios.get(form.value.url)
        .then(res => {
            console.log(res)
            result.value.type = typeof (res) == 'object' ? 'json' : 'string';
            result.value.data = res;
        })
        .catch(err => {
            console.log(err);
            ElMessageBox.alert(err.message, { type: 'error' })
        })
}
const handleSelectMenu = (key, keyPath) => {
    let url = 'http://127.0.0.1:8081/api/' + key.replaceAll('-', '/');
    form.value.url = url;
    form.value.method = 'GET';
    console.log(key, keyPath, url)
}
</script>